<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>02-高级使用</title>
  <style>
    .box{
      width: 200px;
      height: 100px;
      /* 分别设置过渡属性 */
      /* transition-property: height,width; */
      /* 设置全属性 */
      transition-property: all;

      /* 分别设置过渡时间 */
      /* transition-duration: 1s,5s; */
      /* 设置全部时间 */
      transition-duration: 5s;
      /* 设置延时时间 */
      /* transition-delay: 2s; */

    }
    .outer{
      width: 1300px;
      height: 900px;
      border: solid black 1px;
    
    }
    .outer:hover .box{
      width: 1300px;

    }
    .box1{
      background-color: skyblue;
      transition-timing-function: ease;
    
    }
    .box2{
      background-color: red;
      transition-timing-function: linear;

    
    }
    .box3{
      background-color: orange;
      transition-timing-function: ease-in;

    
    }
    .box4{
      background-color: yellow;
      transition-timing-function: ease-out;

    
    }
    .box5{
      background-color: green;
      transition-timing-function: ease-in-out;

    
    }
    .box6{
      background-color: chocolate;
      transition-timing-function: step-start;

    
    }
    .box7{
      background-color: blue;
      transition-timing-function: step-end;

    
    }
    .box8{
      background-color: pink;
      /* 分布到位  分成20份  一开始冲刺 */
      transition-timing-function: steps(20,start);

    
    }
    .box9{
      background-color: lightgreen;
      transition-timing-function: cubic-bezier(1,.6,.74,1.2);

    
    }

  </style>
</head>
<body>
  <div class="outer">
    <div class="box box1">ease(慢，快，慢)</div>
    <div class="box box2">linear(匀速)</div>
    <div class="box box3">ease-in(慢，快)</div>
    <div class="box box4">ease-out（快慢）</div>
    <div class="box box5">ease-in-out(慢快慢)</div>
    <div class="box box6">step-start(不考虑过渡，直接瞬移到位)</div>
    <div class="box box7">step-end(到了过渡时间后，无瞬移效果，才瞬移到位)</div>
    <div class="box box8">step（分布到位）</div>
    <div class="box box9">cubic-bezier（无敌的贝塞尔曲线）</div>

  </div>
  
</body>
</html>